<template>
  <div class="footer">
    <div class="footer-wrapper border-top">
      <router-link to="/index" tag="div" class="footer-items">
        <div class="rotate-icon" @click="changeIndexIconRotate()">
          <svg :class="[index_icon_rotate?'icon index-icon-rotated':'icon index-icon-not-rotate']" aria-hidden="true">
            <use xlink:href="#icon-shouye"></use>
          </svg>
        </div>
      </router-link>
      <div class="footer-items">
        <el-popover placement="top" width="60%" v-model="visible">
          <div class="popup-list">
            <div class="popup-wrapper">
              <div class="popup-item" @click="goDeliver">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-kuaidi1"></use>
                </svg>
                <p>快递代领</p>
              </div>
              <div class="popup-item" @click="goMall">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwu"></use>
                </svg>
                <p>二手商城</p>
              </div>
              <div class="popup-item">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-tongzhuangshui"></use>
                </svg>
                <p>抬水服务</p>
              </div>
            </div>
            <div class="popup-wrapper">
              <div class="popup-item" @click="goPost">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-tianjia"></use>
                </svg>
                <p>发布任务</p>
              </div>
              <div class="popup-item"  @click="showMsgBox">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-gengduo1"></use>
                </svg>
                <p>更多内容</p>
              </div>
              <div class="popup-item"></div>
            </div>
          </div>
          <div slot="reference" @click="changeMenuRotate()">
            <svg :class="menuRotate" aria-hidden="true">
              <use xlink:href="#icon-caidan"></use>
            </svg>
          </div>
        </el-popover>
      </div>
      <router-link to="/personal_index" tag="div" class="footer-items" >
        <div class="rotate-icon" @click="changeUserIconRotate()">
          <svg :class="[user_icon_rotate?'icon user-icon-rotated':'icon user-icon-not-rotate']" aria-hidden="true" >
            <use xlink:href="#icon-wode"></use>
          </svg>
        </div>
      </router-link>
      <!--更多内容： 模拟MessageBox弹出窗-->
      <transition name="el-fade-in-linear">
        <div class="show-msg-box" v-if="msgBox">
        <div class="msg-box">
          <div class="msg-text">
            <p>更多内容正在开发,敬请期待~</p>
          </div>
          <div class="msg-close-btn">
            <el-button type="primary" size="mini" plain @click="showMsgBox">好的，我知道了</el-button>
          </div>
        </div>
      </div>
      </transition>
    </div>
  </div>
</template>

<script>
    export default {
      name: "common-footer",
      data() {
        return {
          visible: false,
          menu_rotate: '',
          index_icon_rotate: false,
          user_icon_rotate : true,
          menu_is_reset: false,
          msgBox: false,
        };
      },
      computed: {
        //菜单动画样式
        menuRotate () {
          if (this.visible){
            this.menu_rotate = 'icon menu-rotated';
            return this.menu_rotate
          } else {
            this.menu_rotate = 'icon menu-not-rotate';
            return this.menu_rotate
          }
        }
      },
      methods: {
        //首页动画
        changeIndexIconRotate () {
          this.index_icon_rotate = !this.index_icon_rotate;
          this.visible = false;
        },
        //菜单动画
        changeMenuRotate () {
          this.visible ? this.visible = false : this.visible = true;
          this.menu_rotate = !this.menu_rotate;
        },
        //个人中心动画
        changeUserIconRotate () {
          this.user_icon_rotate = !this.user_icon_rotate;
          this.visible = false;
        },
        //更多内容 弹出窗
        showMsgBox () {
          this.visible = false;
          this.msgBox = !this.msgBox;
        },
        goDeliver () {
          this.$router.push('/deliver_service')
        },
        goMall () {
          this.$router.push('/mall')
        },
        goPost () {
          this.$router.push('/post_mission')
        }
      }
    }
</script>

<style scoped>
  /* 更多内容 提示弹出层 */
  .show-msg-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5)
  }
  .msg-box {
    z-index: 100;
    background: #fff;
    position: fixed;
    vertical-align: middle;
    top: 35%;
    left: 10%;
    width: 78%;
    padding: 1%;
    border-radius: 8px;
  }
  .msg-text p {
    margin: 45px 20px 20px;
    font-size: 16px;
    text-align: center;
    font-weight: 500;
    color: #555;
  }
  .msg-close-btn {
    text-align: right;
  }
  .el-button--mini{
    padding: 7px 5px;
    margin: 0 20px 10px;
  }
  /* 菜单弹出层 */
  .popup-wrapper {
    display: flex;
  }
  .popup-item {
    flex: 1;
    margin: 18px;
    text-align: center;
  }
  .popup-item .icon {
    font-size: 25px;
  }
  .popup-item p {
    margin: 5px 0;
    font-size: 13px;
  }
  .el-popover__reference .icon {
    width: 100%;
  }
  .el-message-box__wrapper > .el-message-box {
    width: 300px;
  }
  /* 主页动画效果 */
  .index-icon-rotated {
    transform: rotateY(-360deg);
    transition: all 1000ms;
  }
  .index-icon-not-rotate {
    transition: all 1000ms;
  }
  /* 导航栏动画效果 */
  .menu-rotated {
    transform: rotate(45deg);
    transition: all 300ms;
  }
  .menu-not-rotate {
    transition: all 300ms;
  }
  .user-icon-rotated {
    transform: rotateY(-360deg);
    transition: all 1000ms;
  }
  .user-icon-not-rotate {
    transition: all 1000ms;
  }
  .reset-menu-rotate {
    transition: all 300ms;
  }
  /* 底部导航 */
  .footer-wrapper {
    display: flex;
    background-color: #fff;
  }
  .footer-items {
    flex: 1;
    text-align: center;
    padding: 10px 15px;
  }
  .footer-items .icon {
    font-size: 22px;
    width: 100%;
   }
  .router-link-active {
    background: aliceblue;
  }
  .footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
  }
</style>
